<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        position: absolute;
        top: 150px;
        left: 0;
        width: 150px;
        height: 150px;
        border: 1px red solid;
        background-color: red;
    }
</style>

<body>
    <button>点你</button>

    <div class="box"></div>
</body>
<script>
    window.onload = function () {
        function $(selecter) {
            return document.querySelector(selecter);
        }
        // 移动位置
        var moev = 0;
        // 定时器
        var times = null;
        $('button').onclick = function () {
            times = setInterval(() => {
                if (moev <= 600) {
                    moev += 10;
                    $('.box').style.left = moev + 'px';
                } else {
                    clearInterval(times);
                }

            }, 30)
        }
    }
</script>

</html>